import React, { Component } from 'react';
import {
    Image,StyleSheet,AppRegistry,Text,View,ScrollView,TouchableOpacity,FlatList,Modal,DeviceEventEmitter,
    Platform
    } from 'react-native';
import BannerImg from './BannerImg';
import pxToDp from '../common/comm';
import * as DATA from '../data/data';
import * as COMM from '../common/comm';

export default class MyIndex extends Component {
  constructor(props){
    super(props);
    this.state={
      productlist:[],
      isModal:false,
      alertTxt:'',
      isInfo:false,
        info:''
    }
  }
  static navigationOptions = ({ navigation }) => {
    return {
      headerTintColor:'#fff',
      headerTitle: '伏蒙',
      headerLeft: <TouchableOpacity
          onPress={() => {
                    navigation.navigate('Notice');
                }}
          >
        <Image
            source={{uri:DATA.app_pic +'message.png'}}
            style={{
                        marginLeft: pxToDp(20),
                        width: pxToDp(45),
                        height:pxToDp(64)
                    }}>
        </Image>
      </TouchableOpacity>,
      headerRight: COMM.shareBtn(),
      headerStyle: {
        backgroundColor: DATA.BASE_COLOR,
        height: Platform.OS === 'android'?pxToDp(84):pxToDp(110),
      },
      headerBackTitleStyle:{
        position:'relative'
      },
      headerTitleStyle: {
        fontSize: pxToDp(34),
          marginLeft:Platform.OS === 'android'?pxToDp(200):null
      },
      gesturesEnabled :true
    };
  };
  componentWillMount(){
    let _that = this;
    fetch(DATA.PRODUCTLIST_URL)
        .then((response) => {       // 数据解析方式
          if (response.ok) {
            return response.json();
          }
        })
        .then((responseData) => {       // 获取到的数据处理
          if(responseData.status == 1){
            let data = responseData.list;
            for (let i = 0; i < data.length; i++){
              data[i]["key"] = i;
            }
            _that.setState({
              productlist:data
            })
          }
        })
        .catch((error) => { // 错误处理
          //alert('获取数据失败，请重试！');
        })
        .done();
  }
  componentWillUnMount(){
    DeviceEventEmitter.remove();
  }
  componentDidMount() {
    DeviceEventEmitter.addListener('product', (info)=>{
      this.setState({
          info:info,
        isInfo:true
      })
    });
  }
  render() {
    let nav = this.props.navigation;
    return (
        <ScrollView>
          <BannerImg nav={nav}/>
          <ProductItem nav={nav} data={this.state.productlist} isInfo={this.state.isInfo} info={this.state.info}/>
        </ScrollView>
    );
  }
}

class ProductItem extends Component {
  // 构造
  constructor(props) {
    super(props);
  }
  renderItem({item}) {
    let url = DATA.res + item.logo;
    return (
        <View style={styles.itemContainer}>
          <TouchableOpacity
              onPress={()=>{
                        this.props.nav.navigate("Zizhi",{url:item.caozuo});
                    }}>
            <Image
                source={{uri:url}}
                style={styles.itemLogo}
                />
          </TouchableOpacity>
          <TouchableOpacity
              onPress={()=>{
                        this.props.nav.navigate('Product',{
                            info:this.props.info,
                            url:item.conc,
                            pid:item.id,
                            isInfo:this.props.isInfo
                        });
                    }}
              >
            <View style={styles.itemContent}>
              <Text style={styles.itemName}>{item.name}</Text>
              <Text style={styles.itemTitle}>{item.title}</Text>
              <View style={styles.itemKeys}>
                <Text style={styles.itemkey}>{item.keyw1}</Text>
                <Text style={styles.itemkey}>{item.keyw2}</Text>
                <Text style={styles.itemkey}>{item.keyw3}</Text>
              </View>
              <Text style={styles.itemShuoming}>{item.shuoming}</Text>
            </View>
          </TouchableOpacity>
        </View>
    );
  }

  render() {
    return (
        <View>
          <FlatList
              data={this.props.data}
              renderItem={this.renderItem.bind(this)}
              >
          </FlatList>
        </View>
    );
  }
}

let styles = StyleSheet.create({
  itemContainer: {
    flexDirection: 'row',
    alignItems:'center',
    backgroundColor:'#fff',
    marginTop:pxToDp(2),
    paddingTop:pxToDp(6),
    paddingBottom:pxToDp(6),
      paddingLeft:pxToDp(20)
  },
  itemLogo:{
    width:pxToDp(160),
    height:pxToDp(160),
    margin:pxToDp(20)
  },
  itemContent:{
    marginLeft:pxToDp(20),
  },
  itemName:{
    fontSize:pxToDp(30),
    fontWeight:'900'
  },
  itemKeys:{
    flexDirection:'row',
    width:pxToDp(350),
    marginLeft:pxToDp(-10),
    marginTop:pxToDp(10),
  },
  itemkey:{
    flex:1,
    color:'#af0108',
    textAlign:'center',
    width:pxToDp(300),
  },
  itemShuoming:{
    marginTop:pxToDp(10)
  }
});

